<template>
    <div>
        <div class="madd"> 
            <div @click="back">返回</div> 
            <h2>{{time}}</h2>
            <div class="user">
                <span>作者:</span>
                <router-link :to="{path:'/user',query:{name:user.loginname}}">
                   <img :src=user.avatar_url alt=""> 
                </router-link>              
                <span>{{user.loginname}}</span>
            </div>
            <div class="contentss" v-html="content"></div>
            <div>
                <p>评论</p>
                <ul>
                    <li v-for="(itme,index) in user_info" :key="index">
                        <router-link :to="{path:'/user',query:{name:itme.author.loginname}}">
                    <img :src=itme.author.avatar_url alt="">
                </router-link> 
                        <span>{{itme.author.loginname}}</span>
                        <div v-html="itme.content"></div>
                    </li>
                </ul>
            </div>
         </div>
    </div>
</template>

<script>
export default {
    name:'cnode',
    data(){
        return{
            time:this.$route.query.itme,
            user:[],
            user_info:[],
            content:[]
        }
    },
     created(){
        this.$axios({
            method:'get',
            url:' https://cnodejs.org/api/v1/topic/'+ this.$route.query.id,
        }).then((response)=>{
            console.log(response.data)
            this.user=response.data.data.author
            this.user_info=response.data.data.replies
            this.content=response.data.data.content
            console.log(this.user)
        }).catch((error)=>{
            console.log(error)
        })
    },
    methods:{
    back(){
        this.$router.go(-1);//返回上一层
    },
},
}
</script>

<style scoped>
.contentss{
    width: 100%;
    overflow: hidden;
}
img{
    width: 30px;
    height: 30px;
}
.madd{
    padding: 20px;
}
</style>
